<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<view class="header-left" @click="handleJump">
				<view class="back">
					<image src="../../static/image/register/back.webp"></image>
				</view>
			</view>
			<view class="header-right" @click="handleJump">
				<view class="text">
					<image src="../../static/image/register/close.png"></image>
				</view>
			</view>
		</view>
		
		<!-- 中间logo -->
		<view class="center_logo">
			<image src="../../static/image/login/logo.png"></image>
		</view>
		
		<!-- 登录 -->
		<view class="login_warp">
			<view class="login_title">
				注册
			</view>
			<view class="login_username">
				<input type="text" value="" placeholder="请取个名字" @blur="isUser"/>
				<view class="user"  v-if="isUsername">
					<text v-if="isUsernameItem">已有或错误</text>
					<image src="../../static/image/register/right.png" v-else></image>
				</view>
			</view>
			<view class="login_password">
				<input type="text" value="" placeholder="请输入邮箱" @blur="isMail"/>
				<view class="user" v-if="isMailbox">
					<text v-if="isMailboxItem">已有或错误</text>
					<image src="../../static/image/register/right.png" v-else></image>
				</view>
			</view>
			<view class="login_password">
				<input :type="type" value="" placeholder="这里输入密码" @input="handleInput"/>
				<view class="user_password" v-if="isPassword">
					<image src="../../static/image/register/see.png" @click="checkoutSight" v-if="eyeIsPasswordItem"></image>
					<image src="../../static/image/register/biyan.jpg"  @click="checkoutLook" v-else></image>
				</view>
			</view>
			<!-- <view class="tips">
				输入用户或密码错误!
			</view> -->
		</view>
		
		<!-- 注册按钮 -->
		<view class="login_btn" :class="{changeColor: !isUsernameItem && !isMailboxItem && isPasswordItem.length>=6}">
			注册
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:"password",
				isUsername:false, //让用户显示隐藏
				isMailbox:false,  //让邮箱显示隐藏
				isPassword:false,  //让密码显示隐藏
				eyeIsPasswordItem:false,  //让闭眼的图标显示隐藏
				isUsernameItem:true,//检验用户名是否合法
				isMailboxItem:true, //检验邮箱是否合法
				isPasswordItem:''   //获取密码
			}
		},
		methods: {
			// 如果没输入密码就不显示图标，输入密码显示图标
			handleInput(e){
				this.isPasswordItem = e.detail.value
				this.isPasswordItem ? this.isPassword = true : this.isPassword = false
			},
			// 点击开眼图标,切换类型
			checkoutSight(){
				this.type = "password"
				this.eyeIsPasswordItem = !this.eyeIsPasswordItem
			},
			// 点击闭眼图标,切换类型
			checkoutLook(){
				this.type = "text"
				this.eyeIsPasswordItem = !this.eyeIsPasswordItem
			},
			// 判断邮箱是否合法
			isMail(e){
				const strEmail = e.detail.value
				let reg = /^\w+@\w+(\.\w+)+$/;
				if(reg.test(strEmail)){
					this.isMailbox = true
					this.isMailboxItem = false
					return false
				}
				this.isMailbox = true
				this.isMailboxItem = true
				return true
			},
			// 判断用户是否合法
			isUser(e){
				const user = e.detail.value
				let patten = /^[a-zA-Z]\w{3,15}$/ig;
				// 不合法
				if(!patten.test(user)){
					this.isUsername = true
					this.isUsernameItem = true
					return false
				}
				this.isUsername = true
				this.isUsernameItem = false
				return true
			},
			// 点击返回 返回到登录页面
			handleJump(){
				uni.navigateTo({
					url:"../login/login"
				})
			}
		}	
	}
</script>

<style lang="less" scoped>
	.header{
		z-index: 100;
		width: 100%;
		height: 88rpx;
		padding-top: var(--status-bar-height);
		background: #ffffff;
		// border-bottom: 2rpx solid rgba(39,40,50,0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;	
		.header-left{
			line-height: 88rpx;
			.back{
				font-size: 36rpx;
				color: #333333;
				font-weight: 500;
				line-height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 24rpx;
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		.header-right{
			.text{
				font-size: 36rpx;
				color: #333333;
				font-weight: 500;
				line-height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 32rpx;
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}

	.center_logo{
		margin-top: 88rpx;
		width: 100%;
		height: 226rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width: 192rpx;
			height: 91.64rpx;
			margin-top: 12rpx;
		}
	}
	
	.login_warp{
		width: 100%;
		padding: 0 56rpx 0 58rpx;
		box-sizing: border-box;
		.login_title{
			width: 112rpx;
			height: 80rpx;
			font-size: 56rpx;
			color: #272832;
			letter-spacing: 0;
			font-weight: 500;
			font-family: PingFangSC-Medium;
		}
		.login_username{
			display: flex;
			justify-content: space-between;
			margin-top: 68rpx;
			padding-bottom: 18rpx;
			border-bottom: 2rpx solid rgba(39,40,50,0.08);
			.user{
				position: relative;
				text{
					width: 140rpx;
					height: 40rpx;
					font-size: 28rpx;
					color: rgba(255,93,91,1);
					font-weight: 500;
					font-family: PingFangSC-Medium;
				}
				image{
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 42rpx;
					height: 32rpx;
					font-size: 28rpx;
					color: #FF5D5B;
					font-weight: 500;
				}
			}
		}
		.login_password{
			margin-top: 60rpx;
			padding-bottom: 18rpx;
			border-bottom: 2rpx solid rgba(39,40,50,0.08);
			display: flex;
			justify-content: space-between;
			.user{
				position: relative;
				text{
					width: 140rpx;
					height: 40rpx;
					font-size: 28rpx;
					color: rgba(255,93,91,1);
					font-weight: 500;
					font-family: PingFangSC-Medium;
				}
				image{
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 42rpx;
					height: 32rpx;
					font-size: 28rpx;
					color: #FF5D5B;
					font-weight: 500;
				}
			}
			.user_password{
				position: relative;
				image{
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 40rpx;
					height: 40rpx;
					font-size: 28rpx;
					color: #FF5D5B;
					font-weight: 500;
				}
			}
			
		}
		.tips{
			float: left;
			font-size: 20rpx;
			color: rgba(255,93,91,1);
		}
	}
	
	.login_btn{
		// margin-top: 118rpx;
		width: 520rpx;
		height: 96rpx;
		background: rgba(39,40,50,0.20);
		// box-shadow: 0px 50rpx 38rpx -38rpx rgba(255,228,49,0.4);
		border-radius: 48rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 118rpx auto;
		font-size: 32rpx;
		letter-spacing: 0;
		font-weight: 500;
		color: #FFFFFF;
	}
	
	.changeColor{
		box-shadow: 0px 50rpx 38rpx -38rpx rgba(255,228,49,0.4);
		background: #FFE431;
		color: #272832;
	}

</style>
